<template>
  <div>
    <!-- 举报记录表格 -->
    <el-table :data="reportList" style="width: 100%">
      <el-table-column label="举报人" prop="reporterName" />
      <el-table-column label="举报人ID" prop="reporterId" />
      <el-table-column label="举报原因" prop="reason" />
      <el-table-column label="原因描述" prop="description" />
      <el-table-column label="被举报用户" prop="reportedUserName" />
      <el-table-column label="被举报用户ID" prop="reportedUserId" />
      <el-table-column label="操作" width="240">
        <template #default="scope">
          <div class="action-buttons">
            <el-button
              size="small"
              type="success"
              plain
              @click="showRefuseDialog(scope.row)"
            >
              拒绝
            </el-button>

            <el-button
              size="small"
              type="danger"
              plain
              @click="handleBan(scope.row)"
            >
              封禁
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页控件 -->
    <div class="pagination-wrapper">
      <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[1, 5, 10]"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="fetchReports"
        layout="total, sizes, prev, pager, next"
        background
      />
    </div>

    <el-dialog
      v-model="refuseDialogVisible"
      title="拒绝用户举报"
      width="400px"
      @close="resetRefuseDialog"
    >
      <el-input
        v-model="refuseReason"
        type="textarea"
        :rows="4"
        placeholder="请填写拒绝理由"
      />
      <span slot="footer" class="dialog-footer">
        <div class="button-group">
          <el-button @click="resetRefuseDialog">取消</el-button>
          <el-button type="primary" @click="handleRefuseConfirm"
            >确认</el-button
          >
        </div>
      </span>
    </el-dialog>

    <el-dialog
      v-model="banDialogVisible"
      title="选择封禁时长"
      width="400px"
      @close="resetBanSelection"
    >
      <el-radio-group v-model="banDuration">
        <el-radio label="1d">1天</el-radio>
        <el-radio label="3d">3天</el-radio>
        <el-radio label="1w">1星期</el-radio>
        <el-radio label="1m">1月</el-radio>
      </el-radio-group>
      <span slot="footer" class="dialog-footer">
        <div class="button-group">
          <el-button @click="banDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmBan">确认</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getUserReports } from '@/apis/report' // 引入获取用户举报的接口
import { useAccountStore } from '@/stores/useAccountStore.js'
import { ElMessage } from 'element-plus'
import { refuseReport, banTarget } from '@/apis/report' // 引入拒绝举报和封禁API

const reportList = ref([]) // 举报记录
const pageNum = ref(1) // 当前页
const pageSize = ref(10) // 每页条数
const total = ref(0) // 总条数
const banDialogVisible = ref(false) // 控制封禁弹框显示
const banDuration = ref('') // 封禁时长
const refuseDialogVisible = ref(false) // 控制拒绝弹框显示
const refuseReason = ref('') // 拒绝理由
const selectedReport = ref({}) // 当前选中的举报记录

// 获取用户举报记录数据
const fetchReports = async () => {
  try {
    const getUserReportsData = {
      uid: useAccountStore().uid,
      targetType: 4, // 更新为用户举报类型 4
      pageNum: pageNum.value,
      pageSize: pageSize.value,
    }
    const response = await getUserReports(getUserReportsData)
    if (response.code === '200') {
      reportList.value = response.data.list
      total.value = response.data.total
    } else {
      ElMessage.error('获取举报记录失败')
    }
  } catch (error) {
    console.error(error)
    ElMessage.error('获取举报记录失败')
  }
}

// 拒绝举报弹框显示
const showRefuseDialog = (row) => {
  selectedReport.value = {
    reportId: row.reportId,
    reportedUserId: row.reportedUserId,
  }
  refuseDialogVisible.value = true
}

// 拒绝操作确认
const handleRefuseConfirm = async () => {
  if (!refuseReason.value.trim()) {
    ElMessage.error('拒绝理由不能为空')
    return
  }

  const refuseReportData = {
    reportId: selectedReport.value.reportId,
    refuseReason: refuseReason.value,
    targetId: selectedReport.value.reportedUserId,
    targetType: 4, // 更新为用户举报类型 4
  }

  const response = await refuseReport(refuseReportData)

  if (response.code === '200') {
    ElMessage.success('已拒绝该条举报')
    fetchReports() // 刷新举报记录
    refuseDialogVisible.value = false // 关闭拒绝弹框
  } else {
    ElMessage.error('拒绝失败')
  }
}

// 重置拒绝弹框
const resetRefuseDialog = () => {
  refuseReason.value = ''
  refuseDialogVisible.value = false
}

// 封禁操作
const handleBan = async (row) => {
  banDialogVisible.value = true
  selectedReport.value = row
}

// 封禁确认
const confirmBan = async () => {
  if (!banDuration.value) {
    ElMessage.error('请选择封禁时长')
    return
  }

  const banData = {
    targetId: selectedReport.value.reportedUserId,
    targetType: 4, // 更新为用户举报类型 4
    reportId: selectedReport.value.reportId,
    result: banDuration.value,
  }

  const response = await banTarget(banData)

  if (response.code === '200') {
    ElMessage.success('封禁成功')
    fetchReports() // 刷新举报记录
    banDialogVisible.value = false // 关闭封禁弹框
  } else {
    ElMessage.error('封禁失败')
  }
}

// 分页大小变化
const handleSizeChange = (newSize) => {
  pageSize.value = newSize
  pageNum.value = 1
  fetchReports()
}

// 页面加载时获取举报数据
onMounted(() => {
  fetchReports()
})
</script>

<style scoped>
.mainTitle {
  margin-left: 30px;
  font-size: 18px;
  color: #000;
  font-weight: bolder;
}

.el-table {
  margin-top: 20px;
}

.el-button {
  margin-right: 10px;
  margin-bottom: 6px;
}

.action-buttons {
  display: flex;
  gap: 6px;
  justify-content: flex-start;
}

.pagination-wrapper {
  display: flex;
  justify-content: flex-end;
  padding-top: 12px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

.button-group {
  display: flex;
  gap: 10px;
  justify-content: center;
}
</style>
